<template>
    <div style="border-top:1px solid #ffffff;text-algin:center;display:flex">
        <div class="box-flex box-set" ref="boxView" :style="maxRow.length>0?'':'visibility:hidden'">
            <div class="box-left" :style="'left:'+scrollLeft+'px'">
                <div v-for="(h,i) in maxRow" :key="i" :style="'height:'+rowHeight+'px;line-height:'+rowHeight+'px'">{{ i+1 }}</div>
            </div>

            <div class="box-sets">
                <div class="box-header" :style="'width:'+bayWidth+'px;top:'+scrollTop+'px'">
                    <div class="header" v-for="(item,index) in maxBay" v-if="index%2==0" :key="index">{{index|odd}}</div>
                </div>
                <!-- <div v-for="(row,rows) in maxRow" :key="rows">
                    <div class="box-rows">{{rows}}</div>
                </div> -->
                <div style="margin-left:40px;margin-top:40px;">
                    <div v-for="(row,rows) in maxRow" :key="rows" class="row" :style="'width:'+ bayWidth+'px'">
                        <div class="bay" v-for="(item,bay) in row" :key="bay" v-if="(bay+1)%2===0">
                            <div v-for="(val,tier) in item" :key="val.containerNo" class="place" @click="handleClick(rows,bay,tier,val)">
                                <p v-if="val.bayNo%2!==0" :class="val.type" style="height:40px;">
                                    {{ val.containerNo }}
                                    <!-- {{rows}}-{{bay}}-{{tier}}-{{val.containerNo}} -->
                                </p>
                                <p v-else class="even" :class="val.type" :style="'display:'+val.style">
                                    {{val.containerNo}}
                                </p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="box-left">
                <div v-for="(h,i) in maxRow" :key="i" :style="'height:'+rowHeight+'px;line-height:'+rowHeight+'px'">{{ i }}</div>
            </div> -->
        </div>
        <div>
            <el-card class="box-card">
                <div class="box-card-top">
                    <div v-for="item in card" :key="item.name" class="card-place">
                        <div class="place" :class="item.class" style="margin:0"></div>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
    function getBay(num) {
        return (num + 1) / 2
    }
    function setNum(num) {
        if(num>0&&num<10){
            return '0'+num
        }else{
            return num
        }
    }
    import { getYardMap,yardMapControll } from '@/api/yardPlan/yardPlan';
    export default {
        name: "yard-map",
        props: {
            condition:{},
            directive:'',
        },
        data() {
            return {
                maxBay: 33,
                maxRow: [],
                maxTier: 4,
                box:'',
                isScroll:false,
                scrollTop:0,
                scrollLeft:0,
                card:[{
                    name:'进口重箱',
                    class:'JKZX'
                },{
                    name:'空箱',
                    class:'KX'
                },{
                    name:'出口重箱',
                    class:'CKZX'
                },{
                    name:'被选箱',
                    class:'BXX'
                },{
                    name:'被布控箱',
                    class:'BKKX'
                },{
                    name:'被布控场位',
                    class:'BBKCW'
                },{
                    name:'堆场整理箱',
                    class:'DCZLX'
                }],
                cwbk:[],
                xbk:[]
            };
        },
        mounted() {
            // this.loadData()
            this.box=this.$refs.boxView
             this.box.addEventListener('scroll', (res) => {
                let scrollTop=this.$refs.boxView.scrollTop
                let scrollLeft=this.$refs.boxView.scrollLeft
                // console.log(" scroll " + scrollLeft)
                this.scrollTop=scrollTop
                this.scrollLeft=scrollLeft
                // 向下滚动的时候显示
                this.isScroll=scrollTop>0
            }, false)
        },
        methods: {
            loadData() {
                 getYardMap(this.condition).then(res=>{
                     let get={
                         maxBay:3,
                         maxRow:3,
                         maxTier:1
                     }
                    let data=res.data
                    if(data.maxBay%2===0){
                        data.maxBay=data.maxBay+1
                    }
                    this.maxBay=data.maxBay
                    this.maxTier=data.maxTier
                    let [maxBay, maxRow, maxTier] = [data.maxBay, data.maxRow,data.maxTier]
                    let tier = []
                    for (let i = 0; i < maxTier; i++) {
                        tier.push({
                            containerNo: '',
                            type: '',
                        })
                    }
                    let bayNum = maxBay
                    let bay = []
                    for (let i = 0; i < bayNum + 1; i++) {
                        bay.push(tier)
                    }
                    let row = []
                    for (let i = 0; i < maxRow; i++) {
                        row.push(bay)
                    }
                    console.log(row);
                    // 深拷贝!!!
                    this.maxRow = JSON.parse(JSON.stringify(row))
                    console.log(this.maxRow);
                    // let newBay = [{
                    //     bayNo: '02',
                    //     rowNo: 1,
                    //     tierNo: 1,
                    //     containerNo: 'TREE1234554',
                    //     type:'KX'
                    // },{
                    //     bayNo: 2,
                    //     rowNo: 3,
                    //     tierNo: 1,
                    //     containerNo: 'TREE1234555',
                    //     type:'JKZX'
                    // },{
                    //     bayNo: 1,
                    //     rowNo: 2,
                    //     tierNo: 0,
                    //     containerNo: 'TREE1234556',
                    //     type:'CKZX'
                    // },{
                    //     bayNo: 2,
                    //     rowNo: 2,
                    //     tierNo: 0,
                    //     containerNo: 'TREE1234556',
                    //     type:'CKZX'
                    // },{
                    //     bayNo: 1,
                    //     rowNo: 3,
                    //     tierNo: 0,
                    //     containerNo: 'TREE1234556',
                    //     type:'CKZX'
                    // }]
                    let newBay=data.container
                    // let newBay=[{
                    //     bayNo:'01',
                    //     rowNo:'01',
                    //     tierNo:'1',
                    //     containerNo: 'TREE1234554',
                    //     type:'JKZX'
                    // }]
                    for (let i = 0; i < newBay.length; i++) {
                        if (newBay[i].bayNo % 2 === 0) {
                            // console.log(newBay[i]);
                            // console.log(Number(newBay[i].rowNo));
                            // console.log(Number(newBay[i].bayNo) - 1);
                            // console.log(this.maxRow);
                            // console.log(this.maxRow[Number(newBay[i].rowNo)][Number(newBay[i].bayNo) - 1]);
                            // console.log(newBay[i].tierNo);
                            // console.log(newBay[i].containerNo);
                            // console.log(newBay[i].type);
                            this.maxRow[Number(newBay[i].rowNo-1)][Number(newBay[i].bayNo) - 1].splice(newBay[i].tierNo-1, 1, { containerNo: newBay[i].containerNo, type: newBay[i].type, bayNo: Number(newBay[i].bayNo) })
                            this.maxRow[Number(newBay[i].rowNo-1)][Number(newBay[i].bayNo) + 1].splice(newBay[i].tierNo-1, 1, { containerNo: newBay[i].containerNo, type: newBay[i].type, bayNo: Number(newBay[i].bayNo), style: 'none' })
                        } else {
                            console.log(newBay[i]);
                            console.log(newBay[i].tierNo);
                            this.maxRow[Number(newBay[i].rowNo-1)][Number(newBay[i].bayNo)].splice(newBay[i].tierNo-1, 1, { containerNo: newBay[i].containerNo, type: newBay[i].type, bayNo: Number(newBay[i].bayNo) })
                        }
                    }
                    console.log(this.maxRow);

                })
            },
            handleClick(r, b, t, v) {
                console.log(this.directive);
                if(!this.directive){

                }else if(this.directive==='cwbk'){
                    if(!v.containerNo){
                        this.cwbk.push({
                            bayNo:setNum(b),
                            rowNo:setNum(r+1),
                            tierNo:t+1
                        })
                    }else{
                        this.$message({ message: '请选择场位!', type: 'error' })
                    }
                }else if(this.directive==='xbk'){

                }
                console.log(r, b, t, v);
                // this.maxRow[r][b].splice(t,1,{containerNo:'555',type:'blue'})
            },
            handleDirective(){
                console.log(this.directive);
                if(this.directive==='cwbk'){
                    console.log(this.cwbk);
                    console.log(this.cwbkArr);
                    let data={
                        containerYard:this.cwbk
                    }
                    yardMapControll(this.condition['search_EQ_areaId'],data).then(res=>{
                        this.$message({ message: '请选择场位!', type: 'success' })
                        this.cwbk=''
                        this.directive=''
                        this.loadData()
                    })
                }
            },
            handleScroll () { //改变元素#searchBar的top值
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var offsetTop = document.querySelector('#searchBar').offsetTop;

                if(scrollTop<=200){
                    offsetTop = 300 - Number(scrollTop);
                    document.querySelector('#searchBar').style.top = offsetTop+'px';
                }else{
                    document.querySelector('#searchBar').style.top = '100px';
                }
            },
        },
        destroyed () {//离开该页面需要移除这个监听的事件
            window.removeEventListener('scroll', this.handleScroll)
        },
        deactivated(){
            window.removeEventListener('scroll', this.handleScroll)
        },
        computed: {
            bayWidth(){
                // 宽80PX,右边距5PX
                return ((this.maxBay+1)/2)*80+((this.maxBay+1)/2)*5
            },
            rowHeight(){
                // 高40PX
                return this.maxTier*40+this.maxTier*5+6
            },
            cwbkArr(){
                return Array.from(new Set(this.cwbk))
            }
        },
        filters: {
            odd(index) {
                let val = index + 1;
                if (val % 2 !== 0) {
                    if (val < 10) {
                        return "0" + val;
                    } else {
                        return val;
                    }
                }
            }
        }
    };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box-flex{
        display: flex;
        font-size: 12px;
    }
    .box-left{
        padding: 40px 10px 0 10px;
        width: 30px;
        background-color: black;
        color: #ffffff;
        text-align: center;
        position: absolute;
        z-index: 88;
    }
    .box-set {
        min-width: 600px;
        max-width: 600px;
        max-height: 600px;
        margin-right: 30px;
        overflow: auto;
        position: relative;
        background-color: black;
    }
    .box-sets {
        /* min-width: 500px;
        max-width: 600px;
        max-height: 800px;
        overflow: auto; */
        position: relative;
        background-color: black;
    }

    .box-top-title {
        position: absolute;
        top: 3px;
    }

    .box-header {
        padding: 10px 0;
        height: 40px;
        margin-left: 40px;
        position: absolute;
        background-color: black;
    }

    .header {
        width: 84px;
        float: left;
        text-align: center;
        display: block;
        color: #ffffff;
    }
    .box-rows{
        position: relative;
        z-index: 99;
        left: 0;
    }

    .flexCenter {
        display: flex;
        align-items: center;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        list-style-type: none;
    }

    body {
        font-family: Verdana, sans-serif;
    }

    .info-bg {
        cursor: pointer;
    }

    .row {
        display: flex;
        border-top: 1px solid #ffffff;
        padding: 5px 0 0 0;
    }

    .bay {
        margin-right: 5px;
        width: 80px;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .place {
        /* border: 1px solid rgb(245, 56, 56); */
        width: 80px;
        height: 40px;
        margin-bottom: 5px;
        text-align: center;
        line-height: 35px;
        cursor:pointer;
    }

    .place p{
        word-break:break-all
    }

    .even {
        position: relative;
        width: 164px;
        height: 40px;
    }
    .JKZX{
        background-color: #c28efd;
    }
    .CKZX{
        background-color: #F56C6C;
    }
    .BKKX{
        background-color: gold;
    }
    .KX{
        background-color:aquamarine;
    }
    .BXX{
        background-color: dodgerblue;
    }
    .BBKCW{
        background-color: #5c9dff;
    }
    .DCZLX{
        background-color: greenyellow;
    }
    .card-place{
        display: flex;
        width: 160px;
        margin-right: 20px;
        margin-bottom: 10px;
        align-items: center;
        justify-content: space-between;
    }
    .box-card-top{
        display: flex;
        width: 360px;
        flex-wrap: wrap;

    }
</style>
